//////////////////////////////////////
// 这里实现标签页的切换
//////////////////////////////////////

function initSwitchTab() {
    //1.先获取到相关的元素(标签页的按钮, 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    //querySelectorAll可以同时选中多个元素, 得到的结果是个数组
    //[0] 就是会话列表
    //[1] 就是好友列表
    let lists = document.querySelectorAll('.list');
    //2.针对标签页的按钮, 注册点击事件
    //  如果是点击 会话标签 按钮, 就把会话标签按钮的背景图片进行设置
    //  同时把会话列表显示出来, 把好友列表隐藏
    //  如果是点击 好友标签 按钮, 就把好友标签按钮的背景图片进行设置
    //  同时把好友列表显示出来, 把会话列表进行隐藏

    tabSession.onclick = function () {
        //a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        //b) 让会话列表显示出来, 让好友列表隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function () {
        //a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(img/用户.png)';
        //b) 让会话列表隐藏出来, 让好友列表显示
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();


///////////////////////////////////////////////////
// 操作 websocket
///////////////////////////////////////////////////

//创建一个 websocet 实例
// let websocet = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
let websocketUrl = "ws://" + location.host + "/WebSocketMessage";
let websocket = new WebSocket(websocketUrl);
//给这个websocket 注册上一些回调函数
websocket.onopen = function () {
    //连接建立完成后, 就会自动执行到
    console.log("websocket 连接成功");
}

websocket.onmessage = function (e) {
    //收到消息时, 自动执行到
    console.log("websocket 收到消息:" + e.data);
    let resp = JSON.parse(e.data);
    if (resp.type == 'message') {
        //处理消息响应
        handleMessage(resp);
    } else if (resp.type == 'newFriend') {
        //处理加好友的响应
        //将好友请求展示在会话最前面
        showNewFriendApplication(resp);
    } else {
        //resp 的 type 出错
        console.log("resp.type 不符合要求");
    }
}


websocket.onclose = function () {
    //连接断开后, 就会自动执行到
    console.log("websocket 连接断开");
}

websocket.onerror = function () {
    //连接异常时
    console.log("websocket 连接异常");
}


function handleMessage(resp) {
    //控制音乐
    let username = document.querySelector('.left .user').innerHTML;
    if (username != resp.fromName) {
        // let musicPlayer = document.querySelector('#musicPlayer');
        // musicPlayer.play();
        // console.log("音乐播放:" + username + " , " + resp.fromName);

        if (!musicPlayer.paused) {
            musicPlayer.pause();
            musicPlayer.currentTime = 0;
        }
        musicPlayer.play();
    }
    //把客户端收到的消息 给展示出来
    //展示到对应的会话预览区和右侧消息区

    //1.根据响应中的 sessionId 获取到当前会话对应的 li 标签
    // 如果 li 标签不存在, 则创建一个
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        //就需要创建一个新的 li 标签, 表示新的会话
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></P>';
        //给这个 li 标签添加点击事件的处理
        curSessionLi.onclick = function () {
            clickSession(curSessionLi);
        }
    }
    //2.把新的消息, 显示到会话的预览区域(li 标签里的 p 标签中)
    // 如果消息太长, 就需要进行截断
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    //3.把收到消息的会话放到会话列表最上面
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    //4.如果当前收到消息的会话处于被选中状态, 则把当前的消息放在右侧的消息列表中
    //  新增消息的同时, 注意调整滚动条的位置, 保证新消息在底部
    if (curSessionLi.className == 'selected') {
        //把消息列表添加一个新消息
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv, resp);
        scrollBottom(messageShowDiv);
    }
}

function findSessionLi(targetSessionId) {
    //获取到所有会话列表中的 li 标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    return null;
}


///////////////////////////////////////////////////
// 实现消息发送和接收逻辑
///////////////////////////////////////////////////

function initSentButton() {
    //1.获取到发送按钮 和 消息输入框
    let sendButton = document.querySelector('.right .ctrl  button');
    let messageInput = document.querySelector('.right .message-input');
    //2.给发送按钮注册点击事件
    sendButton.onclick = function () {
        //a.先正对输入框的内容做个简单判定, 输入框里内容为空, 则啥也不干
        if (!messageInput.value) {
            // value的值是 null
            return;
        }
        //b.获取当前选中的 li 标签的 sessionId
        let selectedLi = document.querySelector('#session-list .selected');
        if (selectedLi == null) {
            //当前没有 li 标签被选中
            return;
        }
        let sessionId = selectedLi.getAttribute('message-session-id');
        //c.构造 json 数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        //转为json字符串
        req = JSON.stringify(req);
        console.log("[webSocket] send:" + req);
        //d.通过 websocket 发送消息
        websocket.send(req);
        //e.发送完成之后, 清空输入框
        messageInput.value = "";
    }

    //按回车键发送消息功能实现
    messageInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') { // 检测是否按下回车键
            event.preventDefault(); // 阻止默认的换行行为
            sendButton.click(); // 触发button按钮的点击事件
        }
    });
}

initSentButton();


///////////////////////////////////////////////////
// 从服务器获取用户登录数据
///////////////////////////////////////////////////

function getUserInfo() {
    $.ajax({
        type: "get",
        url: "userInfo",
        success: function (body) {
            //从服务器获取数据
            //校验结果是否有效
            if (body && body.userId > 0) {
                //如果结果有效, 则把用户名显示到界面上
                //同时也可以记录userId 到html标签的属性中 (以备后用)
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("user-id", body.userId);
            } else {
                //如果结果无效, 说明当前用户未登录,则跳转到登录页面
                // alert("当前用户未登录!")
                location.assign("/login.html");
            }
        }
    });
}

getUserInfo();

function getFriendList() {
    $.ajax({
        type: 'get',
        url: 'friendList',
        success: function (body) {
            //1.先把之前的好友列表内容清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';
            //2.遍历body, 把服务器响应的结果加回到 friend-list中
            for (let friend of body) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                //此处把friend的id记录下来, 以备后用
                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);

                // 每个li标签, 就对应页面的一个好友选项, 给这个li加上点击事件的处理
                li.onclick = function () {
                    //参数区分了当前用户点击的是哪个好友
                    clickFriend(friend);
                }
            }
        },
        error: function () {
            console.log("获取好友列表失败!");
        }
    });
}

getFriendList();





function getSessionList() {
    $.ajax({
        type: 'get',
        url: 'sessionList',
        success: function (body) {
            //1.清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            //2.遍历响应的数组, 对结果来构造页面
            for (let session of body) {
                //针对 lastMessage 的长度进行截断处理
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                //把会话id保存在li标签的自定义属性中
                li.setAttribute('message-session-id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'
                    + '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                //给li标签新增点击事件
                li.onclick = function () {
                    clickSession(li);
                }
            }

            // 查询好友请求消息
            getNewFriendApplication();
        }
    });


}

getSessionList();

// getNewFriendApplication();
// 从数据库中读取好友请求消息
function getNewFriendApplication() {
    $.ajax({
        type: 'get',
        url: 'newFriendApplication',
        success: function (body) {
            for (let resp of body) {
                showNewFriendApplication(resp);
            }
        },
        error: function () {
            console.log("获取好友申请时出现内部错误!");
        }
    });
}



function showNewFriendApplication(resp) {
    console.log("[showNewFriendApplication]:" + resp.content);
    if (resp.content.length > 10) {
        resp.content = resp.content.substring(0, 10) + '...';
    }
    let friendDiv = document.createElement('div');
    friendDiv.className = 'friend-application';

    let leftDiv = document.createElement('div');
    leftDiv.className = "left";
    leftDiv.innerHTML = '<h3>好友申请 ' + resp.fromName + '</h3>'
        + '<p >' + resp.content + '</p>';
    friendDiv.appendChild(leftDiv);

    let rightDiv = document.createElement('div');
    rightDiv.className = "right";
    rightDiv.setAttribute("firendId", resp.fromId);
    rightDiv.innerHTML = '<button class="reject">拒绝</button>'
        + '<button class="accept">同意</button>';
    friendDiv.appendChild(rightDiv);

    //把好友申请插入到最上面
    let sessionListDiv = document.querySelector('.left #session-list');
    sessionListDiv.insertBefore(friendDiv, sessionListDiv.children[0]);

    //给拒绝 和 同意 按钮添加点击事件
    let accetpButton = friendDiv.querySelector('.right .accept');
    let rejectButton = friendDiv.querySelector('.right .reject');
    accetpButton.onclick = function () {
        acceptAppliction(resp.fromId);
        sessionListDiv.removeChild(friendDiv);
    }
    rejectButton.onclick = function () {
        rejectApplication(resp.fromId);
        sessionListDiv.removeChild(friendDiv);
    }

}


//接收对方的好友申请
function acceptAppliction(friendId) {
    console.log("接受好友请求");
    $.ajax({
        type:'post',
        url: 'acceptApplication?friendId=' + friendId,
        success:function(body) {
            if(body == true) {
                confirm("好友添加成功!")
            }else {
                confirm("内部错误, 请联系管理员!")
            }
            getFriendList();
        }
    });
}

//拒绝对方的好友申请
function rejectApplication(friendId) {
    console.log("拒绝好友请求");
    $.ajax({
        type:'post',
        url: 'rejectApplication?friendId=' + friendId,
        success:function(body) {
            if(body == true) {
                confirm("好友拒绝成功!")
            }else {
                confirm("内部错误, 请联系管理员!")
            }
        }
    });
}

function clickSession(currentLi) {
    //1.设置高亮
    let allLis = document.querySelectorAll('#session-list>li');
    acticeSesson(allLis, currentLi);
    //2.获取指定会话的历史消息
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function acticeSesson(allLis, currentLi) {
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId=" + sessionId);
    //1.先清空右侧列表中的已有内容
    let titleDiv = document.querySelector('.right .title')
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';

    //2.重新设置会话的标题, 新的标题是点击会话上面显示的标题
    // 先找到当前选中的会话是哪个, 被选中的会话带有 selected
    let selectedH3 = document.querySelector('#session-list .selected>h3')
    if (selectedH3) {
        //selectedH3 可能不存在, 比如前面加载阶段, 可能并没有哪个会话被选中
        //也就没有会话带有 selected 标签, 此时就无法查询出这个 selectedH3
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    //3.发送 ajax 请求给服务器, 获取到该会话的历史消息
    $.ajax({
        type: 'get',
        url: 'message?sessionId=' + sessionId,
        success: function (body) {
            //此处返回的 body 是个 js 对象数组, 里面每一个元素都是一条消息
            for (let message of body) {
                addMessage(messageShowDiv, message);
            }
            //在构造好消息列表之后, 控制滚动条, 自动滚动到最下方
            scrollBottom(messageShowDiv);
        }
    });
}

function addMessage(messageShowDiv, message) {
    console.log("[addMessage]" + message.content);
    //使用这个 div 表示一个消息
    let messageDiv = document.createElement('div');
    //此处需要针对当前消息是不是用户自己发的, 决定是靠左还是靠右
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if (selfUsername == message.fromName) {
        //消息是自己发的, 靠右
        messageDiv.className = 'message message-right'
    } else {
        //消息是别人发的, 靠左
        messageDiv.className = 'message message-left'
    }

    messageDiv.innerHTML = '<div class="box">'
        + '<h4>' + message.fromName +' &nbsp&nbsp '+ message.postTime + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

//把messageShowDiv里的内容滚动到最底部
function scrollBottom(elem) {
    //1.获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    //2.获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    //3.进行滚动操作 第一个参数是水平方向滚动的尺寸, 第二个是垂直方向滚动的尺寸
    elem.scrollTo(0, scrollHeight - clientHeight);
}


//点击好友列表项, 触发的函数
function clickFriend(friend) {
    //1.先判定一下当前这个好友是否有对应的会话
    //  使用一个单独的函数来实现, 这个函数参数是用户的名字, 返回值是一个 li 标签, 
    //  找到了就返回对应会话里的 li, 没找到返回null
    let sessionLi = findSessoinByName(friend.friendName);
    let sessionListUL = document.querySelector("#session-list");
    if (sessionLi) {
        //2.如果存在匹配的结果, 就把这个会话设置成选中的状态, 获取历史消息,并且置顶
        // insertBefore 把这个找到的li标签放到最前面去
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        //设置会话的选中状态, 获取历史消息
        clickSession(sessionLi);
    } else {
        //3.如果不存在匹配的结果, 就创建个新会话(创建 li 标签 + 通知服务器)
        sessionLi = document.createElement('li');
        //构造 li 标签, 由于新会话没有 最后一条消息 p标签置空
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        }
        clickSession(sessionLi);
        //发送消息给服务器, 告诉服务器当前创建的会话
        createSession(friend.friendId, sessionLi);
    }

    //4.还需要把标签页切换到会话列表
    // 只要找到会话列表标签页按钮, 模拟一个点击操作即可
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}

function findSessoinByName(username) {
    //先获取到会话列表的所有 li 标签
    //然后一次遍历, 看看这些 li 标签是的名字和要查找的名字一样
    let sessionLis = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        //获取到该标签里的 h3 标签, 进一步获取到名字
        let h3 = sessionLi.querySelector('h3');
        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}

function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: 'session?toUserId=' + friendId,
        success: function (body) {
            console.log("会话创建成功, sessionId=" + body.sessionId);
            sessionLi.setAttribute('message-session-id', body.sessionId);
        },
        error: function () {
            console.log("会话创建失败");
        }
    });
}


///////////////////////////////////////////
// 加好友功能实现
///////////////////////////////////////////

function initSearchButton() {
    let searchButton = document.querySelector('.main .left .search button');
    searchButton.onclick = function () {
        searchFriends();
        // document.querySelector('.left .search input').value = "";
    }

    let searchInput = document.querySelector('.left .search input')
    searchInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') { // 检测是否按下回车键
            event.preventDefault(); // 阻止默认的换行行为
            searchButton.click(); // 触发button按钮的点击事件
        }
    });
}

initSearchButton();

function searchFriends() {
    let friendName = document.querySelector('.left .search input').value;
    console.log("查询好友: friendName:" + friendName);
    $.ajax({
        type: 'get',
        url: 'searchFriend?friendName=' + friendName,
        success: function (body) {
            for (var friend of body) {
                console.log(friend);
            }
            showFriends(body, friendName);
        }
    });
}

function showFriends(body, friendName) {
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '有关"' + friendName + '"的用户搜索结果';
    //清空聊天记录
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';
    // //去除发送按钮
    // let sendButtonDiv = document.querySelector('.right .ctrl');
    // sendButtonDiv.innerHTML = '';

    let newHtml = '';
    for (friend of body) {
        if (friend.status == 1) {
            newHtml += '<div class="friend" friendId=' + friend.friendId + '>';
            newHtml += ' <div class="friend-name">' + friend.friendName + '</div>';
            newHtml += '<div class="reason">好友申请理由:</div>';
            newHtml += '<input type="text" class="message">';
            newHtml += '<button>已添加</button>';
            newHtml += '</div>';
        } else if (friend.status == 2) {
            newHtml += '<div class="friend newFriend" friendId=' + friend.friendId + '>';
            newHtml += ' <div class="friend-name">' + friend.friendName + '</div>';
            newHtml += '<div class="reason">好友申请理由:</div>';
            newHtml += '<input type="text" class="message">';
            newHtml += '<button class="added-btn">加好友</button>';
            newHtml += '</div>';
        } else {
            newHtml += '<div class="friend newFriend" friendId=' + friend.friendId + '>';
            newHtml += ' <div class="friend-name">' + friend.friendName + '</div>';
            newHtml += '<div class="reason">好友申请理由:</div>';
            newHtml += '<input type="text" class="message">';
            newHtml += '<button class="">等待回应</button>';
            newHtml += '</div>';
        }
    }

    messageShowDiv.innerHTML = newHtml;

    // 为加好友按钮添加点击事件
    let allButton = document.querySelectorAll('.added-btn');
    for (let button of allButton) {
        button.onclick = function () {
            let friendId = button.parentNode.getAttribute('friendId');
            let message = button.parentNode.querySelector('.message').value;
            // 执行相关操作，发送请求给后端
            console.log('加好友按钮被点击，friendId: ' + friendId + ', message: ' + message);
            
           
            sendAddFriendMessage(friendId, message);
            button.innerHTML = '等待回应';
            button.onclick = null;
        }


    }
}

function sendAddFriendMessage(friendId, message) {
    //构造 json 数据
    let req = {
        type: 'newFriend',
        sessionId: friendId,
        content: message
    };
    //转为 json 字符串
    req = JSON.stringify(req);
    console.log("[webSocket] send加好友请求:" + req);
    //通过 webSocet 发送消息
    websocket.send(req);
}



















